import React from 'react'
/* 
  受控组件示例
*/

export default class Ipt2 extends React.Component {
    state = {
        txt: '',
        content: '',
        city: 'bj',
        isChecked: false
    }

    /* handleChange = e => {
      this.setState({
        txt: e.target.value
      })
    }
  
    // 处理富文本框的变化
    handleContent = e => {
      this.setState({
        content: e.target.value
      })
    }
  
    // 处理下拉框的变化
    handleCity = e => {
      this.setState({
        city: e.target.value
      })
    }
  
    // 处理复选框的变化
    handleChecked = e => {
      this.setState({
        isChecked: e.target.checked
      })
    } */

    handleChange = (e) => {
        var target = e.target
        var { name } = e.target  //  获取表单元素的name属性
        //  获取所有表单元素的值或者状态值
        var val = e.target.type === 'checkbox' ? target.checked : target.value
        this.setState({
            // [target.name]:val
            //  属性名是一个参数 需要使用[]包裹
            [name]: val
        })
    }

    render() {
        return (
            <div>
                {/* 文本框 */}==={this.state.txt}
                <input name='txt' type="text" value={this.state.txt} onChange={this.handleChange} />
                <br />

                {/* 富文本框 */}==={this.state.content}
                <textarea name='content' value={this.state.content} onChange={this.handleChange}></textarea>
                <br />

                {/* 下拉框 */}==={this.state.city}
                <select name='city' value={this.state.city} onChange={this.handleChange}>
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                    <option value="gz">广州</option>
                </select>
                <br />

                {/* 复选框 */}
                <input name='isChecked' type="checkbox" checked={this.state.isChecked} onChange={this.handleChange} />
            </div>
        )
    }
}
